import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';

//底部导航栏
import { TabNavigator } from "react-navigation";
import MeterBooksScene from '../MeterBooksScene';

class CustInfo extends React.Component {
	static navigationOptions = {
		tabBarLabel: '用户',
		tabBarIcon: ({ focused, tintColor }) => (
			<Image
				source={focused ? require('../../img/back.png') : require('../../img/back.png')}
				style={{ width: 26, height: 26, tintColor: tintColor }}
			/>
		)
	};
	
	render() {
		return (
			<View style={styles.container}>
				<Text>这是用户</Text>
			</View>
		);
	}
} 
	
	class Entry extends React.Component {
		static navigationOptions = {
			tabBarLabel: '抄表',
			tabBarIcon: ({ focused, tintColor }) => (
				<Image
					source={focused ? require('../../img/arrowDown.png') : require('../../img/arrowDown.png')}
					style={{ width: 26, height: 26, tintColor: tintColor }}
				/>
			)
		};
		
		render() {
			return (
				<View style={styles.container}>
					<MeterBooksScene/>
				</View>
			);
		}
	}

const BottomTabBar = TabNavigator(
	{
		CustInfo: {
			screen: CustInfo,
		},
		Entry: {
			screen: Entry,
		},
	},
	{
    tabBarOptions: {
		activeTintColor: '#4BC1D2',
		inactiveTintColor: '#000',
		showIcon: true,
		showLabel: true,
		upperCaseLabel: false,
		pressColor: '#823453',
		pressOpacity: 0.8,
		style: {
			backgroundColor: '#fff',
			paddingBottom: 0,
			borderTopWidth: 0.5,
			borderTopColor: '#ccc',
		},
		labelStyle: {
			fontSize: 12,
			margin: 1
		},
		indicatorStyle: { height: 0 }, //android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了
    },
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    animationEnabled: false,
    lazy: true,
    backBehavior: 'none',
  });

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  }
});

module.exports = BottomTabBar;